<template>
	<li>
		<a @click="jump('caseDetails')" target="_blank">
			<div class="images">
				<img src="../../assets/imgs/serviceimg2.jpg" alt="武汉公选王教育科技有限公司" />
			</div>
			<div class="text">
				<h3>武汉公选王教育科技有限公司</h3>
				<p>2000㎡ | 办公 | 网络/科技</p>
				<div class="click-more">CLICK MORE ↓</div>
			</div>
		</a>
	</li>
</template>

<script setup>
	import {
		useRouter
	} from 'vue-router'; // 引入 useRouter


	const router = useRouter(); // 获取路由实例
	const jump = (path) => {
		router.push({
			name: path
		}); // 使用 router 实例进行跳转
	}
</script>

<style lang="less" scoped>
	li {
		a {
			display: block;
			width: 100%;
			height: 100%;
			position: relative;
			cursor: pointer;

			&:hover {
				color: #fff;
				background: #da1a45;

				h3 {
					color: #fff !important;
				}

				p {
					color: #fff !important;
				}

				.images {
					transform: translateY(-44px);
				}

				.text {
					height: 126px;
					padding: 0 20px;
				}
			}

			.images {
				transition: all 0.4s ease;

				img {
					display: block;
					width: 100%;
					height: 100%;
				}
			}

			.text {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				transition: height 0.4s ease;
				height: 82px;

				h3 {
					padding-top: 20px;
					font-size: 16px;
					margin-bottom: 10px;
					color: #333333;
				}

				p {
					color: #969696;
					margin-bottom: 20px;
				}
			}
		}
	}
</style>